<template>
  <div class="common-page">
    <title-view title="搜索栏" icon="item-register"></title-view>
    <search-bar></search-bar>
    <title-view title="侧边树状图" icon="item-register"></title-view>
    <div class="common-flex-align-center">
      <div class="common-side-view">
        <side-view v-model="sideValue" :list="sideList"></side-view>
      </div>
      <div class="common-side-view">
        <side-view2 v-model="sideValue2" :list="sideList2"></side-view2>
      </div>
    </div>

    <title-view title="标识" icon="item-register"></title-view>
    <div class="common-flex-align-center">
      <div class="common-tag">ONVIF</div>
      <div class="common-tag orange">GB218181</div>
      <div class="common-tag green">RTSP</div>
      <div class="common-tag outline">算法001</div>
      <div class="common-icon-tag green">
        <svg-icon class="icon" name="icon"></svg-icon>
      </div>
    </div>
    <title-view title="表格操作栏" icon="item-register"></title-view>
    <div class="common-options">
      <div class="item">
        <svg-icon class="icon" name="options-edit " />
        <t-link theme="primary" class="link" :underline="true">编辑</t-link>
      </div>
      <div class="item disabled">
        <svg-icon class="icon" name="options-detail" />
        <t-link theme="primary" class="link" :underline="true">详情</t-link>
      </div>
      <div class="item">
        <svg-icon class="icon" name="options-edit " />
        <t-link theme="primary" class="link" :underline="true">删除</t-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import SearchBar from './components/SearchBar.vue';
import SideView from './components/SideView.vue';
import SideView2 from './components/SideView2.vue';
/*
 * 1.实时预览
 * 2.大屏数据以及图表
 * 3.文件上传
 * 4.进度条
 * 5.message样式
 * 6.弹框样式
 *
 * */
const sideList = [
  { label: '1号设备', value: '1' },
  { label: '自定义设备名称000552642', value: '2' },
  { label: '自定义设备名称000552642', value: '3' },
  { label: '自定义设备名称000552642', value: '4' },
  { label: '自定义设备名称000552642自定义设备名称000552642', value: '5' },
];

const sideList2 = [
  { label: '设备名称YFHGYNTFR', value: '1', status: 0 },
  { label: '设备名称YFHGYNTFR', value: '2', status: 1 },
  { label: '设备名称YFHGYNTFR', value: '3', status: 0 },
  { label: '设备名称YFHGYNTFR', value: '4', status: 2 },
  { label: '设备名称YFHGYNTFR', value: '5', status: 1 },
  { label: '设备名称YFHGYNTFR', value: '6', status: 2 },
];

const sideValue = ref('1');
const sideValue2 = ref('1');
</script>

<style lang="less" scoped>
.title-view {
  margin-top: 10px;
}
</style>
